import React, { Component } from 'react';
import { Alert, StyleSheet } from 'react-native';
import {
  Assets,
  Colors,
  View,
  Text,
  Button,
  Checkbox,
  CheckboxRef,
} from 'react-native-ui-lib'; //eslint-disable-line
import { TestCase, TestSuite } from '@rnoh/testerino';

export default class CheckboxScreen extends Component {
  state = {
    value1: false,
    value2: false,
    value3: true,
    value4: true,
    value5: false,
    value6: false,
    value7: false,
    value8: false,
    value9: false,
    validationText: '',
    validationColor: Colors.$textDefault,
  };

  checkbox = React.createRef<CheckboxRef>();
  checkbox1 = React.createRef<CheckboxRef>();

  onPress = () => {
    this.checkbox.current?.validate();
  };

  onPress1 = () => {
    this.checkbox1.current?.validate();
  };

  onValueChange = (value: boolean) => {
    this.setState({ value7: value }, () => {
      // console.log('onValueChange: ', value);
    });
  };

  onValueChange1 = (value: boolean) => {
    this.setState({ value8: value }, () => {
      // console.log('onValueChange: ', value);
    });
  };

  onChangeValidity = (value?: boolean) => {
    this.setState({
      validationText: String(value),
      validationColor:
        value === true ? Colors.$textSuccess : Colors.$textDangerLight,
    });
  };

  render() {
    return (
      <TestSuite name="Checkbox">
        <TestCase itShould="设置 selectedIcon,第一个是x,第二个是默认的√">
          <View row marginB-s5 centerV centerH>
            <Checkbox
              value={this.state.value3}
              onValueChange={value3 => this.setState({ value3 })}
              borderRadius={2}
              size={30}
              color={Colors.purple30}
              selectedIcon={Assets.internal.icons.x}
              marginL-s5
            />
            <Checkbox
              value={this.state.value3}
              onValueChange={value3 => this.setState({ value3 })}
              borderRadius={2}
              size={30}
              color={Colors.purple30}
              marginL-s5
            />
          </View>
        </TestCase>

        <TestCase itShould="设置iconColor,第一个x是白色,第二个√是绿色">
          <View row marginB-s5 centerV centerH>
            <Checkbox
              value={this.state.value3}
              onValueChange={value3 => this.setState({ value3 })}
              borderRadius={2}
              size={30}
              color={Colors.purple30}
              marginL-s5
            />
            <Checkbox
              value={this.state.value3}
              onValueChange={value3 => this.setState({ value3 })}
              borderRadius={2}
              size={30}
              color={Colors.purple30}
              iconColor={Colors.green10}
              marginL-s5
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 value, true:已选,false:未选">
          <View row marginB-s5 centerV centerH>
            <Checkbox
              value={this.state.value2}
              onValueChange={value2 => this.setState({ value2 })}
              borderRadius={2}
              size={30}
              color={Colors.purple30}
              marginL-s5
            />
            <Checkbox
              value={this.state.value3}
              onValueChange={value2 => this.setState({ value2 })}
              borderRadius={2}
              size={30}
              color={Colors.purple30}
              marginL-s5
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 borderRadius,第一个圆角2,第二个圆角10">
          <View row marginB-s5 centerV centerH>
            <Checkbox
              value={this.state.value2}
              onValueChange={value2 => this.setState({ value2 })}
              borderRadius={2}
              size={30}
              color={Colors.purple30}
              marginL-s5
            />
            <Checkbox
              value={this.state.value2}
              onValueChange={value2 => this.setState({ value2 })}
              borderRadius={10}
              size={30}
              color={Colors.purple30}
              marginL-s5
            />
          </View>
        </TestCase>

        <TestCase itShould="设置color,第一个紫色，第二个灰色">
          <View row marginB-s5 centerV centerH>
            <Checkbox
              value={this.state.value2}
              onValueChange={value2 => this.setState({ value2 })}
              borderRadius={5}
              size={18}
              color={Colors.purple30}
              selectedIcon={Assets.internal.icons.x}
              marginL-s5
            />
            <Checkbox
              value={this.state.value2}
              onValueChange={value2 => this.setState({ value2 })}
              borderRadius={5}
              size={18}
              color={Colors.grey10}
              iconColor={Colors.green10}
              marginL-s5
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 size,第一个30,第二个18">
          <View row marginB-s5 centerV centerH>
            <Checkbox
              value={this.state.value2}
              onValueChange={value2 => this.setState({ value2 })}
              borderRadius={2}
              size={30}
              color={Colors.purple30}
              selectedIcon={Assets.internal.icons.x}
              marginL-s5
            />
            <Checkbox
              value={this.state.value2}
              onValueChange={value2 => this.setState({ value2 })}
              borderRadius={2}
              size={18}
              color={Colors.grey10}
              iconColor={Colors.green10}
              marginL-s5
            />
          </View>
        </TestCase>


        <TestCase
          itShould="设置onValueChange事件"
          initialState={false}
          arrange={({ setState, reset }) => (
            <View padding-20 centerH>
              <Checkbox
                value={this.state.value1}
                onValueChange={value1 => {
                  this.setState({ value1 });
                  setState(true)
                  Alert.alert('onValueChange');
                }}
              />
            </View>
          )}
          assert={({ state, expect }) => {
            expect(state).to.be.true;
          }}
        />
        <TestCase itShould="设置 disabled">
          <View row style={styles.row}>
            <Checkbox
              disabled={true}
              value={this.state.value2}
              onValueChange={value2 => this.setState({ value2 })}
            />
            <Checkbox
              disabled={false}
              value={this.state.value5}
              onValueChange={value5 => this.setState({ value5 })}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 style,第一个设置了红色背景，第二个没有设置">
          <View row style={styles.row}>
            <Checkbox
              disabled
              value={this.state.value5}
              onValueChange={value5 => this.setState({ value5 })}
              style={{ marginRight: 10, backgroundColor: "red" }}
            />
            <Checkbox
              disabled
              value={!this.state.value5}
              onValueChange={value5 => this.setState({ value5 })}
            />
          </View>
        </TestCase>


        <TestCase itShould="设置 labelProps, 字符串最后显示...">
          <View column style={styles.row}>
            <Checkbox
              value={this.state.value8}
              onValueChange={value8 => this.setState({ value8 })}
              label={'设置 labelProps设置 labelProps设置 labelProps设置 labelProps'}
              labelStyle={{
                fontSize: 14,
                color: '#333',
                marginLeft: 10,
                flex: 1, // 如果需要标签换行
              }}
              labelProps={{
                numberOfLines: 1,
                ellipsizeMode: 'tail',
              }}
            />

            <Checkbox
              value={this.state.value8}
              onValueChange={value8 => this.setState({ value8 })}
              label={'设置 labelProps设置 labelProps设置 labelProps设置 labelProps'}
              labelStyle={{
                fontSize: 14,
                color: '#333',
                marginLeft: 10,
                flex: 1, // 如果需要标签换行
              }}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 containerStyle">
          <View column style={styles.row}>
            <Checkbox
              value={this.state.value8}
              onValueChange={value8 => this.setState({ value8 })}
              containerStyle={{ backgroundColor: "red" }}
              label={'设置 containerStyle'}
              labelStyle={{
                fontSize: 14,
                color: '#333',
                marginLeft: 10,
                flex: 1, // 如果需要标签换行
              }}
            />

            <Checkbox
              value={this.state.value8}
              onValueChange={value8 => this.setState({ value8 })}
              containerStyle={{ backgroundColor: "blue" }}
              label={'设置 containerStyle'}
              labelStyle={{
                fontSize: 14,
                color: '#333',
                marginLeft: 10,
                flex: 1, // 如果需要标签换行
              }}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置 labelStyle,字体颜色">
          <View column style={styles.row}>
            <Checkbox
              value={this.state.value9}
              onValueChange={value9 => this.setState({ value9 })}
              label={'设置 labelStyle'}
              labelStyle={{ color: 'blue' }}
              outline
            />

            <Checkbox
              value={this.state.value9}
              onValueChange={value9 => this.setState({ value9 })}
              label={'设置 labelStyle'}
              labelStyle={{ color: 'red' }}
              outline
            />
          </View>
        </TestCase>
        <TestCase itShould="设置outline,true:√是中空的">
          <View row style={styles.row}>
            <Checkbox
              value={true}
              onValueChange={value9 => this.setState({ value9 })}
              style={{ marginRight: 10 }}
              outline
            />

            <Checkbox
              value={true}
              onValueChange={value9 => this.setState({ value9 })}
              outline={false}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置label,第一个有label,第二个没有">
          <View column style={styles.row}>
            <Checkbox
              value={true}
              onValueChange={value9 => this.setState({ value9 })}
              label={'设置 labelStyle'}
              style={{ marginRight: 10 }}
            />

            <Checkbox
              value={true}
              onValueChange={value9 => this.setState({ value9 })}
            />
          </View>
        </TestCase>

        <TestCase itShould="设置required={true}、onChangeValidity 属性">
          <View marginT-20>
            <Text marginB-4 color={this.state.validationColor}>
              {this.state.validationText}
            </Text>
            <View row centerV spread marginB-10>
              <Checkbox
                required
                onChangeValidity={this.onChangeValidity}
                ref={this.checkbox}
                value={this.state.value7}
                onValueChange={this.onValueChange}
                label={'This is a checkbox'}
              />
              <Button
                size={'small'}
                label={'Validate'}
                onPress={this.onPress}
              />
            </View>
          </View>
        </TestCase>

        <TestCase itShould="设置required={false}、onChangeValidity 属性">
          <View marginT-20>
            <Text marginB-4 color={this.state.validationColor}>
              {this.state.validationText}
            </Text>
            <View row centerV spread marginB-10>
              <Checkbox
                required={false}
                onChangeValidity={this.onChangeValidity}
                ref={this.checkbox1}
                value={this.state.value8}
                onValueChange={this.onValueChange1}
                label={'This is a checkbox'}
              />
              <Button
                size={'small'}
                label={'Validate'}
                onPress={this.onPress1}
              />
            </View>
          </View>
        </TestCase>
      </TestSuite>
    );
  }
}

const styles = StyleSheet.create({
  checkbox: {
    marginBottom: 20,
  },
  row: {
    alignItems: 'center',
  },
});
